<template>
  <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="handleChange">
    <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"></el-tab-pane>
  </el-tabs>
</template>
<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: String,
    default: "",
  },
});
const activeTab = ref(props.modelValue);
const emit = defineEmits(["change", "update:modelValue"]);
const handleChange = (tab) => {
  emit("change", tab);
  emit("update:modelValue", tab);
};
watchEffect(() => {
  activeTab.value = props.modelValue;
});
</script>

<style scoped lang="scss">
.demo-tabs {
  width: 100%;
}
</style>
